<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :title="title"
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
        :is_right="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="container">
        <div class="empty db rel" style="z-index: 3" v-show="emptyShow">
          <div class="flexs">
            <van-empty
              class="custom-image"
              :image="require('../../assets/images/none.png')"
              :description="$t('load.doc1')"
            />
          </div>
        </div>

        <van-pull-refresh
          v-model="refreshing"
          :success-text="$t('load.refreshed')"
          @refresh="onRefresh(0)"
          head-height="200"
          v-if="!emptyShow"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="$t('load.no_more')"
            :loading-text="$t('load.loading')"
            @load="onLoad"
            :immediate-check="check"
          >
            <ul class="list">
              <li class="db" v-for="(item, k) in datalist" :key="k">
                <div class="pic"><img v-lazy="item.coverUrl" alt="" /></div>
                <div class="flexs">
                  <div class="n text-overflow">
                    {{ item.name }}
                    <div class="time">
                      <img src="../../assets/images/Group17.png" alt="" />
                      <div>{{ item.time }}</div>
                    </div>
                  </div>
                  <div class="fott">
                    <div class="fo1">
                      <span class="title">{{ $t("page.doc125") }}：</span>
                      <div>
                        <span class="con" v-if="item.levelName != ''">{{
                          item.levelName
                        }}</span>
                        <span class="con" v-else>{{ $t("page.doc126") }}</span>
                      </div>
                    </div>
                    <div class="fo1">
                      <span class="title">{{ $t("page1.doc46") }}：</span>
                      <span class="income">{{ item.income }} USDT</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </van-pull-refresh>
      </div>

      <van-popup v-model="type_show" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          :default-index="defaultIndex"
          @confirm="onConfirm"
          @cancel="onCancel"
          item-height=".8rem"
          :confirm-button-text="$t('page.doc83')"
          :cancel-button-text="$t('page4.doc63')"
        />
      </van-popup>
    </template>
    <template #footer>
      <glFooter :activeTitle="activeTitle"></glFooter>
    </template>
  </page-scroll>
</template>
<script>
export default {
  data() {
    return {
      title: this.$t("page.doc121"),
      activeTitle: "record",
      datalist: [],
      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: true,

      type_show: false, // 下拉开关
      columns: [this.$t("page3.doc86"), this.$t("page3.doc87")], // 下拉框数据
      gradeData: "", // 显示等级数据
      levelData: [], // 等级数据
      defaultIndex: 0, // 默认选择
      movieType: 0, // 类型（0-今日【默认】，1-全部）
    };
  },

  mounted() {},
  created() {
    this.getlist();
  },
  methods: {
    // 下拉取值
    onConfirm(value, index) {
      this.gradeData = value;
      this.type_show = false;
      if (this.movieType != index) {
        this.loading = false;
        this.finished = false;
        this.movieType = index;
        this.totalPage = "";
        this.pageSize = 0;
        this.datalist = [];
        this.getlist();
      } else {
        this.$toast(this.$t("page3.doc88") + " " + this.columns[index]);
      }
    },
    // 关闭下拉框
    onCancel() {
      this.type_show = false;
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = [];
          this.refreshing = false;
        }
        this.getlist();
      }, 1000);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;

      this.pageSize = 0;
      this.totalPage = "";

      this.onLoad();
    },

    getlist() {
      this.pageSize = this.pageSize + 1;
      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true;

        return;
      }
      this.$post(this.URL.home.movie_record, { page: this.pageSize }).then(
        (res) => {
          if (res.code == 0) {
            if (res.code == 2001) {
              this.loading = true;
              this.finished = false;
              this.emptyShow = true;
              return;
            }
            if (res.data.list.length == 0) {
              this.emptyShow = true;
            }

            this.totalPage = res.data.page.totalPage;
            this.pageIndex = res.data.page.index;

            this.datalistNum = res.data.page.count;

            let initData = res.data.list;
            this.datalist.push(...initData);
            this.loading = false;
            if (this.totalPage == 0) {
              this.finished = true;
            }
          } else {
            this.loading = true;
            this.finished = false;
            this.emptyShow = true;
            this.$toast(res.message);
          }
        }
      );
    },
    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  margin-top: 0.22rem;
  margin-bottom: 1.3rem;
  li {
    margin-bottom: 0.24rem;
    background: var(--CObackgroundLinear2);
    border-radius: 0.2rem;
    padding-right: 0.35rem;
    .n {
      font-size: 0.32rem;
      font-weight: 500;
      color: var(--COcolor3);
      line-height: 0.45rem;
      margin-bottom: 0.8rem;
      .time {
        margin-top: 0.16rem;
        font-size: 0.24rem;
        font-family: Helvetica;
        color: var(--COcolor1);
        display: flex;
        align-items: center;
        img {
          height: 0.24rem;
          margin-right: 0.11rem;
        }
      }
    }
    .fo1 {
      margin-bottom: 0.16rem;
      font-size: 0.24rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: var(--COcolor1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        flex: 1;
        text-align: right;
      }
      .con {
        color: var(--COcolor3);
        word-break: break-all;
        word-wrap: break-word;
      }
      .income {
        font-size: 0.32rem;
        color: var(--COcolor2);
        font-weight: bold;
      }
    }
    .pic {
      width: 2.4rem;
      height: 3rem;
      margin-right: 0.24rem;
      border-radius: 0.1rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
.c-fff {
  color: #fff;
}
</style>
